import React, { Component } from 'react'
import NavHeader from '../../components/NavHeader'
import { Link } from 'react-router-dom'

import { Toast } from 'antd-mobile'



import styles from './index.module.css'

import './index.scss'


import { getCityData, getRectData } from '../../api/map'

// 覆盖物的样式
const labelStyle = {
    cursor: 'pointer',
    border: '0px solid rgb(255,0,0)',
    padding: '0px',
    whiteSpace: 'nowrap',
    fontSize: '12px',
    color: 'rbg(255,255,255)',
    textAlign: 'center'
}
export default class index extends Component {

    state = {
        rectData: [],  // 小区的房子信息
        isShow: false,  // 是否显示房源信息
    }

    componentDidMount() {
        this.initMap()
    }

    // 获取城市房源信息
    async getCityData(id) {


        Toast.loading('加载中...', 0, null, false)

        try {
            const { data } = await getCityData(id)

            const { nextZoom, type } = this.getTypeAndZoom()

            data.body.forEach(item => {
                this.createOverLays(item, nextZoom, type)
            });
        } catch (err) {
            console.log(err);
        } finally {
            Toast.hide()
        }

    }

    // 获取地图缩放区别，覆盖物类别
    getTypeAndZoom() {
        const zoom = this.map.getZoom()
        let nextZoom, type
        // 11 默认缩放级别，展示所有覆盖物
        if (zoom >= 10 && zoom < 12) {
            // 形状原型
            type = 'circle'
            nextZoom = 13
        } else if (zoom >= 12 && zoom < 14) {
            nextZoom = 15
            // circle 表示绘制圆形的覆盖物，镇
            type = "circle"
        } else if (zoom >= 14 && zoom < 16) {
            // circle 表示绘制矩形的覆盖物，小区
            type = "rect"
        }
        return { nextZoom, type }
    }
    //  创建覆盖物
    createOverLays(data, zoom, type) {
        const { label: cityNmae, coord: { latitude, longitude }, count, value } = data

        // 创建坐标
        const areaPoint = new window.BMapGL.Point(longitude, latitude)

        // 判断是 区镇 还是 小区
        if (type === 'circle') {
            this.createCircle(cityNmae, areaPoint, count, value, zoom)
        } else {
            this.createRect(cityNmae, areaPoint, count, value)
        }
    }

    // 创建区或者镇的信息
    createCircle(name, point, count, id, zoom) {

        var city = new window.BMapGL.Label(name, {       // 创建文本标注
            position: point,
            offset: new window.BMapGL.Size(-35, -35)
        })

        // 设置覆盖物内容
        city.setContent(`<div class="${styles.bubble}">
                    <p class="${styles.name}">${name}</p>
                    <p>${count}套</p>
                    </div>`)
        // 设置样式
        city.setStyle(labelStyle)

        city.addEventListener('click', () => {

            this.getCityData(id)

            this.map.centerAndZoom(point, zoom)
            setTimeout(() => {
                this.map.clearOverlays()
            }, 0);

        })

        // label.addEventListener('click', function () {
        //     // 当点击了覆盖物，要以当前点击的覆盖物为中心来放大地图
        //     map.centerAndZoom(this.K.position, 13);
        //     // 解决清除覆盖物的时候，百度地图js报错问题
        //     setTimeout(function () {
        //         map.clearOverlays()
        //     }, 0)
        // })
        // 给label添加唯一标识
        // console.log(value);
        city.id = id
        // 添加到地图上
        this.map.addOverlay(city)
    }

    // 创建小区的
    createRect(name, point, count, id) {
        var city = new window.BMapGL.Label(name, {       // 创建文本标注
            position: point,
            offset: new window.BMapGL.Size(-50, -25)
        })

        // 设置覆盖物内容
        city.setContent(`
        <div class="${styles.rect}">
        <span class="${styles.housename}">${name}</span>
        <span class="${styles.housenum}">${count}套</span>
        <i class="${styles.arrow}"></i>
      </div>
                    `)
        // 设置样式
        city.setStyle(labelStyle)

        city.addEventListener('click', (e) => {
            // 获取到点击的小区坐标， 然后把它移到中心 -330 是下面房屋信息
            const target = e.domEvent.changedTouches[0]
            let height = (window.innerHeight - 330) / 2 - target.clientY;
            let width = (window.innerWidth / 2) - target.clientX
            this.map.panBy(width, height)
            this.getRectData(id)
        })
        this.map.addEventListener('movestart', () => {
            if (this.state.isShow) {
                this.setState({
                    isShow: false
                })
            }
        })

        // 给label添加唯一标识
        city.id = id
        // 添加到地图上
        this.map.addOverlay(city)
    }

    // 获取房源信息
    async getRectData(id) {
        Toast.loading('加载中...', 0, null, false)
        try {
            const { data } = await getRectData(id)
            this.setState({
                rectData: data.body.list,
                isShow: true
            })
        } catch (error) {
            console.log(error);
        } finally {
            Toast.hide()
        }


    }
    // 渲染房屋信息
    renderHousesList() {
        return this.state.rectData.map(item => (
            <div className={styles.house} key={item.houseCode}>
                <div className={styles.imgWrap}>
                    <img
                        className={styles.img}
                        src={`http://localhost:8080${item.houseImg}`}
                        alt=""
                    />
                </div>
                <div className={styles.content}>
                    <h3 className={styles.title}>{item.title}</h3>
                    <div className={styles.desc}>{item.desc}</div>
                    <div>
                        {/* ['近地铁', '随时看房'] */}
                        {item.tags.map((tag, index) => {
                            const tagClass = 'tag' + (index + 1)
                            return (
                                <span
                                    className={[styles.tag, styles[tagClass]].join(' ')}
                                    key={tag}
                                >
                                    {tag}
                                </span>
                            )
                        })}
                    </div>
                    <div className={styles.price}>
                        <span className={styles.priceNum}>{item.price}</span> 元/月
                    </div>
                </div>
            </div>
        ))
    }

    // 初始化地图
    initMap() {
        var map = new window.BMapGL.Map("container");
        this.map = map
        var point = new window.BMapGL.Point(116.404, 39.915);
        map.centerAndZoom(point, 15);

        var { label, value } = JSON.parse(window.localStorage.getItem('liu_city'))

        //创建地址解析器实例
        var myGeo = new window.BMapGL.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint(label, async (point) => {
            if (point) {
                map.centerAndZoom(point, 11);
                map.addOverlay(new window.BMapGL.Marker(point))
                var zoomCtrl = new window.BMapGL.ZoomControl();  // 添加缩放控件
                map.addControl(zoomCtrl);
                var scaleCtrl = new window.BMapGL.ScaleControl();  // 添加比例尺控件
                map.addControl(scaleCtrl);

                // 获取数据 然后调用
                this.getCityData(value)
            }
        }, label)
    }

    render() {
        return (
            <div className="map" >
                <NavHeader>地图找房</NavHeader>
                <div id="container"></div>


                {/* 房源列表 */}
                {/* 添加 styles.show 展示房屋列表 */}
                <div
                    className={[
                        styles.houseList,
                        this.state.isShow ? styles.show : ''
                    ].join(' ')}
                >
                    <div className={styles.titleWrap}>
                        <h1 className={styles.listTitle}>房屋列表</h1>
                        <Link className={styles.titleMore} to="/home/list">
                            更多房源
                        </Link>
                    </div>

                    <div className={styles.houseItems}>
                        {/* 房屋结构 */}
                        {this.renderHousesList()}
                    </div>
                </div>
            </div>
        )
    }
}
